<template>
  <!--pages/my/my.wxml-->
  <view class="container">
    <view class="top-container">
      <image class="bg-img" src="../../static/images/my/mine_bg.png" />
      <view class="logout"></view>
      <view class="user">
        <view class="avatar-img">
          <open-data type="userAvatarUrl"></open-data>
        </view>
        <view class="user-info-mobile">
          <open-data type="userNickName"></open-data>
        </view>
      </view>
    </view>

    <view class="middle-container">
      <view
        @tap="previewReward"
        class="middle-item"
        hover-class="opcity"
        :hover-stay-time="150"
      >
        <image class="ticket-img" src="../../static/images/my/reward.png" />
        <text class="middle-tag">赞赏</text>
      </view>
      <view
        class="middle-item"
        hover-class="opcity"
        :hover-stay-time="150"
        style="position:relative;"
      >
        <button open-type="feedback" class="btn-feedback"></button>
        <image class="car-img" src="../../static/images/my/feedback.png" />
        <text class="middle-tag">反馈</text>
      </view>
    </view>

    <view class="bottom-container">
      <view class="ul-item">
        <view
          @tap="goSource"
          class="item"
          hover-class="opcity"
          :hover-stay-time="150"
        >
          <image class="item-img" src="../../static/images/my/source.png" />
          <text class="item-name">反馈源</text>
        </view>
        <view class="item" hover-class="opcity" :hover-stay-time="150">
          <button open-type="contact" class="btn-feedback"></button>
          <image class="item-img" src="../../static/images/my/contact.png" />
          <text class="item-name">联系开发者</text>
        </view>
        <view
          @tap="goLogs"
          class="item"
          hover-class="opcity"
          :hover-stay-time="150"
        >
          <image class="item-img" src="../../static/images/my/log.png" />
          <text class="item-name">更新日志</text>
        </view>
      </view>
      <view class="ul-item">
        <view
          @tap="goSetting"
          class="item"
          hover-class="opcity"
          :hover-stay-time="150"
        >
          <image class="item-img" src="../../static/images/my/set.png" />
          <text class="item-name">设置</text>
        </view>
        <view
          v-if="config.admin"
          @tap="goAdmin"
          class="item"
          hover-class="opcity"
          :hover-stay-time="150"
        >
          <image class="item-img" src="../../static/images/my/admin.png" />
          <text class="item-name">管理员</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {};
  },
  computed: mapState(["config"]),
  onLoad() {
    // console.log(this.config);
  },
  methods: {
    previewReward: function() {
      let url =
        "https://7465-test-go5gy-1300156620.tcb.qcloud.la/root/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20190906170729.png?sign=8bf264802d8c86a871bcd841f2163cad&t=1567760955";
      if (process.env.NODE_ENV == "production") {
        url =
          "https://7072-prod-7228j-1300156620.tcb.qcloud.la/root/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20190906170729.png?sign=970980665df826ecbc473543d13f3cf8&t=1567761133";
      }
      uni.previewImage({
        urls: [url]
      });
    },
    goSource() {
      uni.navigateTo({
        url: "/pages/source/source"
      });
    },
    goLogs() {
      uni.navigateTo({
        url: "/pages/log/log"
      });
    },
    goSetting() {
      uni.navigateTo({
        url: "/pages/setting/setting"
      });
    },
    goAdmin() {
      uni.navigateTo({
        url: "/pages/admin/admin"
      });
    }
  }
};
</script>

<style>
/* pages/my/my.wxss */
.container {
  position: relative;
}

.top-container {
  height: 440upx;
  position: relative;
  display: flex;
  flex-direction: column;
}

.bg-img {
  position: absolute;
  width: 100%;
  height: 440upx;
  z-index: -1;
}

.logout {
  width: 110upx;
  height: 36upx;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 42upx 0 24upx 32upx;
}

.logout-img {
  width: 36upx;
  height: 36upx;
  margin-right: 11upx;
}

.logout-txt {
  font-size: 28upx;
  color: #fefefe;
  line-height: 28upx;
}

.user-wrapper {
  display: flex;
  justify-content: center;
}

.user {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.avatar-img {
  width: 160upx;
  height: 160upx;
  border-radius: 50%;
  align-self: center;
  overflow: hidden;
}

.user-info {
  display: flex;
  flex-direction: row;
  margin-top: 30upx;
  align-items: center;
}

.user-info-mobile {
  margin-top: 30upx;
  position: relative;
  font-size: 28upx;
  color: #fefefe;
  line-height: 28upx;
  align-self: center;
  padding: 0 50upx;
}

.edit-img {
  position: absolute;
  width: 42upx;
  height: 42upx;
  right: 0;
  bottom: -4upx;
}

.edit-img > image {
  width: 42upx;
  height: 42upx;
  padding-left: 25upx;
}

.middle-container {
  height: 138upx;
  display: flex;
  flex-direction: row;
  align-items: center;
  border-radius: 10upx;
  background-color: #ffffff;
  margin: -30upx 30upx 26upx 30upx;
  box-shadow: 0 15upx 10upx -15upx #efefef;
  justify-content: center;
}

.middle-item {
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.ticket-img {
  width: 80upx;
  height: 80upx;
}

.middle-tag {
  font-size: 28upx;
  color: #333333;
  line-height: 28upx;
  font-weight: bold;
  padding-left: 22upx;
}

.car-img {
  width: 80upx;
  height: 80upx;
  margin-left: 97upx;
}

.bottom-container {
  height: 334upx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 40upx 74upx 40upx 95upx;
  margin: 0 30upx;
  background-color: #ffffff;
  border-radius: 10upx;
  box-sizing: border-box;
  box-shadow: 0 0 10upx #efefef;
}

.ul-item {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.item {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.item-img {
  width: 64upx;
  height: 64upx;
}

.item-name {
  padding-top: 13upx;
  font-size: 24upx;
  color: #666666;
  min-width: 80upx;
  text-align: center;
}

.btn-feedback {
  background: transparent !important;
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
}
</style>
